.create-order {
	min-height: 100vh;
	background-color: $mall-bg-100;
	padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
	
	.goods-card {
		background-color: #fff;
		margin: 20rpx;
		padding: 30rpx;
		border-radius: $uni-border-radius-sm;
		display: flex;
		
		.goods-image {
			width: 160rpx;
			height: 160rpx;
			border-radius: $uni-border-radius-sm;
			margin-right: 20rpx;
		}
		
		.goods-info {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			
			.goods-name {
				font-size: 28rpx;
				color: $mall-text-100;
				line-height: 1.4;
			}
			
			.price-info {
				display: flex;
				justify-content: space-between;
				align-items: baseline;
				
				.price {
					font-size: 32rpx;
					color: $mall-primary-100;
					font-weight: bold;
					
					&::before {
						content: '¥';
						font-size: 24rpx;
					}
				}
				
				.points {
					font-size: 32rpx;
					color: $mall-accent-100;
					font-weight: bold;
					
					.unit {
						font-size: 24rpx;
						margin-left: 4rpx;
					}
				}
				
				.mixed-price {
					display: flex;
					align-items: baseline;
					
					.points {
						font-size: 28rpx;
						color: $mall-accent-100;
						font-weight: bold;
					}
					
					.unit {
						font-size: 24rpx;
						color: $mall-accent-100;
					}
					
					.plus {
						margin: 0 8rpx;
						color: $mall-text-200;
						font-size: 24rpx;
					}
					
					.cash {
						font-size: 28rpx;
						color: $mall-primary-100;
						font-weight: bold;
						
						&::before {
							content: '¥';
							font-size: 24rpx;
						}
					}
				}
				
				.count {
					font-size: 26rpx;
					color: $mall-text-200;
				}
				
				.gift-card, .gift-voucher {
					font-size: 32rpx;
					color: $mall-accent-100;
					font-weight: bold;
				}
			}
		}
	}
	
	.address-section {
		background-color: #fff;
		margin: 20rpx;
		padding: 30rpx;
		border-radius: $uni-border-radius-sm;
		
		.address-content {
			display: flex;
			align-items: flex-start;
			
			.label {
				font-size: 28rpx;
				color: $mall-text-100;
				margin-right: 40rpx;
				padding-top: 4rpx;
			}
			
			.value-wrapper {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.address-info {
					flex: 1;
					margin-right: 20rpx;
					
					.user-info {
						margin-bottom: 8rpx;
						
						.name {
							font-size: 28rpx;
							color: $mall-text-100;
							font-weight: bold;
							margin-right: 20rpx;
						}
						
						.phone {
							font-size: 28rpx;
							color: $mall-text-200;
						}
					}
					
					.detail {
						font-size: 28rpx;
						color: $mall-text-100;
						line-height: 1.4;
					}
				}
				
				.no-address {
					flex: 1;
					font-size: 28rpx;
					color: $mall-text-200;
					margin-right: 20rpx;
				}
			}
		}
		
		&:active {
			background-color: $mall-bg-100;
		}
	}
	
	.amount-section {
		background-color: #fff;
		margin: 20rpx;
		padding: 30rpx;
		border-radius: $uni-border-radius-sm;
		
		.amount-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			
			&:last-child {
				margin-bottom: 0;
			}
			
			&.total {
				padding-top: 20rpx;
				border-top: 1px solid $mall-bg-200;
				
				.label, .value {
					color: $mall-primary-100;
					font-weight: bold;
				}
			}
			
			.label {
				font-size: 28rpx;
				color: $mall-text-200;
			}
			
			.value {
				font-size: 28rpx;
				color: $mall-text-100;
			}
		}
	}
	
	.remark-section {
		background-color: #fff;
		margin: 20rpx;
		padding: 30rpx;
		border-radius: $uni-border-radius-sm;
		display: flex;
		align-items: center;
		
		.label {
			font-size: 28rpx;
			color: $mall-text-200;
			margin-right: 40rpx;
		}
		
		.input {
			flex: 1;
			font-size: 28rpx;
			color: $mall-text-100;
		}
	}
	
	.action-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 12rpx 20rpx;
		padding-bottom: calc(12rpx + env(safe-area-inset-bottom));
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 -2rpx 20rpx rgba(0, 0, 0, 0.05);
		
		button {
			min-width: 180rpx;
			height: 80rpx;
			border-radius: $uni-border-radius-sm;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0;
			
			&.submit-btn {
				background: linear-gradient(135deg, $mall-primary-100, $mall-primary-200);
				color: #fff;
				font-weight: bold;
				
				&:disabled {
					opacity: 0.5;
					background: $mall-bg-300;
				}
				
				&:active {
					transform: scale(0.98);
				}
			}
		}
		
		.amount-info {
			flex: 1;
			margin-right: 20rpx;
			
			.label {
				font-size: 28rpx;
				color: $mall-text-200;
			}
			
			.amount {
				font-size: 36rpx;
				color: $mall-primary-100;
				font-weight: bold;
				
				&::before {
					content: '¥';
					font-size: 24rpx;
					margin-right: 4rpx;
				}
			}
			
			.points {
				font-size: 36rpx;
				color: $mall-accent-100;
				font-weight: bold;
			}
			
			.mixed-payment {
				display: flex;
				align-items: baseline;
				
				.points {
					font-size: 32rpx;
					color: $mall-accent-100;
					font-weight: bold;
				}
				
				.plus {
					margin: 0 8rpx;
					color: $mall-text-200;
					font-size: 24rpx;
				}
				
				.amount {
					font-size: 32rpx;
					color: $mall-primary-100;
					font-weight: bold;
					
					&::before {
						content: '¥';
						font-size: 24rpx;
					}
				}
			}
			
			.gift {
				font-size: 32rpx;
				color: $mall-accent-100;
				font-weight: bold;
			}
		}
	}
}
